<template>
  <mu-container>
    <mu-appbar
      class="header_title"
      style="width: 100%; margin-bottom: 15px"
      title="个人中心"
      color="#d81b60"
    ></mu-appbar>
    <!-- 顶部用户信息 -->
    <mu-row gutter>
      <mu-col span="4">
        <div class="grid-cell">
          <img
            style="width: 60px; height: 60px"
            src="../assets/images/girl.png"
          />
        </div>
      </mu-col>
      <mu-col span="8">
        <div class="grid-cell">
          <mu-list>
            <mu-list-item button :ripple="false">
              <mu-list-item-action>
                <mu-icon value="menu"></mu-icon>
              </mu-list-item-action>
              <mu-list-item-title>用户编号：{{ user.id }}</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button :ripple="false">
              <mu-list-item-action>
                <mu-icon value="perm_identity"></mu-icon>
              </mu-list-item-action>
              <mu-list-item-title>昵称：{{ user.userName }}</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button :ripple="false">
              <mu-list-item-action>
                <mu-icon value="mail_outline"></mu-icon>
              </mu-list-item-action>
              <mu-list-item-title
                >余额：{{ user.userBalance }}元</mu-list-item-title
              >
            </mu-list-item>
            <mu-list-item button :ripple="false">
              <mu-button color="primary" small @click="userLogout"
                >退出登录</mu-button
              >
            </mu-list-item>
          </mu-list>
        </div>
      </mu-col>
    </mu-row>
  </mu-container>
</template>
  <script>
export default {
  data() {
    return {
      active1: 0,
      user: {
        userName: "zzx",
        userBalance: 0,
      },
    };
  },
  created() {
    this.$parent.showNav = true;
    // 请求用户信息
    // 从 Local Storage 中检索数据
    let user = JSON.parse(localStorage.getItem("user"));
    this.$axios({
      method: "post",
      url: "/user/userLogin",
      params: null,
      data: user,
    })
      .then((res) => {
        // console.log(res.data);
        let resData = res.data;
        if (resData.code === 200) {
          // 更新数据到 Local Storage
          this.user = resData.data.user;
          localStorage.setItem("user", JSON.stringify(user));
        } else {
          this.$toast.error("系统异常！请重新登录");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },

  methods: {
    userLogout() {
      // 删除user缓存
      localStorage.removeItem("user");
      this.$toast.warning("注销账号成功！将返回登录页面");
      this.$parent.showNav = false;
      this.$router.replace({ path: "/" });
    },
  },
};
</script>
  <style lang="less">
.grid-cell {
  border-radius: 4px;
  height: 86px;
  background: transparent;
  padding-top: 20px;
}

.mu-list {
  padding: 0px;
}

.mu-item {
  height: 25px;
}

.demo-text {
  padding: 16px;
  background: #fff;

  p {
    margin: 8px 0;
  }
}

.test-router-link {
  color: #42797d;
}
</style>
  